<template>
	<view>
		<view class="queResPop" :class="[ansRightFlag ? 'succ' : 'err']">
			<image class="resImg" v-if="ansRightFlag" src="../../../../static/images/zhuxue/rightRes.png"></image>
			<image class="resImg" v-if="!ansRightFlag" src="../../../../static/images/zhuxue/errRes.png"></image>
			<view class="resCon">
				<template v-if="ansRightFlag">
					<view class="resTit">
						<text class="iconfont icon-xiaolian"></text>
						<text>恭喜你答对了</text>
					</view>
					<view v-if="currPage == 'queList'">恭喜答对了,获得{{jfNum}}积分奖励</view>
					<view v-else-if="currPage == 'errBook'">恭喜你答对了,本题系统已判定为已订正~</view>
					<view v-else>恭喜答对了,继续加油哦~</view>
				</template>
				<template v-else-if="!ansRightFlag">
					<view class="resTit">
						<text class="iconfont icon-cry"></text>
						<text>很遗憾你答错了</text>
					</view>
					<view v-if="currPage !== 'errBook'">胜不骄败不馁,再接再厉取得好成绩</view>
					<view v-else>点击重新订正,继续解答该题吧！加油哦~</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			ansRightFlag:Boolean,
			jfNum:Number,
			currPage:{
				type:String,
				default:'queList'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.queResPop{
		display: flex;
		@include respTo(phone){
			padding: 30rpx;
		}
		@include respTo(pad){
			padding: 20rpx;
		}
		.resImg{
			@include respTo(phone){
				width: 139rpx;
				height: 149rpx;
			}
			@include respTo(pad){
				width: 129rpx;
				height: 139rpx;
			}
		}
		.resCon{
			flex: 1;
			@include respTo(phone){
				font-size: $font-size30; 
			}
			@include respTo(pad){
				font-size: $padSize20; 
			}
			color: $pss-text-color3;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.resTit{
				margin-bottom: 20rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				@include respTo(phone){
					font-size: $font-size34; 
				}
				@include respTo(pad){
					font-size: $padSize24; 
				}
				.iconfont{
					margin-right: 10rpx;
					@include respTo(phone){
						font-size: 38rpx; 
					}
					@include respTo(pad){
						font-size: 26rpx; 
					}
				}
			}
		}
		&.succ{
			.resTit{
				color: $pss-color-green;
			}
		}
		&.err{
			.resTit{
				color: $pss-color-red;
			}
		}
	}
</style>